写一个可插入自定义标签的 Textarea 组件 |
您所在的位置:网站首页 › vue tag组件 › 写一个可插入自定义标签的 Textarea 组件 |
- “插入自定义标签是什么鬼?” - “比如你要插入一个的标签...” - “什么情况下会有这种需求?” - “得罪了产品的情况下...”
一、需求背景 某天,产品找到我,发生了如下对话 PM:“哇,研发小哥哥你今天好帅啊~” 我:“说人话。” PM:“我有一个需求。” 我:“我不听。” PM:“我们要给用户发送模版消息。” 我:“找后端小姐姐啊。” PM:“后端小姐姐让你在编辑这个字段的时候,标记对应的模版词组。” 我:“怎么标记?” PM:“然后我希望在删除这个模版词组的时候,可以整个删除。” 我:“怎么删除?!” PM:“整个删除。” 我:(打开抽屉,亮出我的四十米长刀) PM:(楚楚可怜的看着我) 我:“做不了。” PM:(伸出一根手指) 我:“这需求我接了。”
十年后... 仓库地址:https://github.com/wisewrong/vue-tag-textarea
二、输入功能实现 为了实现这个功能,我最先想的是改造一个 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性,可以让元素内容可编辑 这是一个可编辑的段落。但这样改造之后的输入框,在粘贴的时候会带上文本格式,即富文本 所以最后我放弃了该属性,采用 CSS 的解决方案:-webkit-user-modify 这个属性有四个可选值: read-only:默认值,元素只读,不可编辑; read-write:可以编辑,支持富文本; read-write-plaintext-only:可以编辑,不支持富文本; write-only:使元素仅用于编辑(几乎没有浏览器支持)
所以最后我给输入框添加了这样一行 CSS 属性: -webkit-user-modify: read-write-plaintext-only !important;
三、实现单向绑定 一个常规的输入框组件,父组件可以通过 v-model 指令双向绑定数据 v-model 其实是一个语法糖,它向子组件传递一个 value 属性,并接收一个 input 事件 所以对于父组件来说: 等价于:
而子组件为了支持 v-model,需要在 props 里定一个 value 属性 并且在合适的时候触发 this.$emit('input', value)
在这个 tag-textarea 组件中,我在输入框上监听 input 事件,获取元素内的 innerHTML,并暴露给父组件
到这里,还仅仅实现了单项绑定——子组件的值改变时,父组件的值随之改变 要实现真正意义上的双向绑定,还有一段路要走
四、完成双向绑定 首先需要在 data 定义一个 currentText 如果是普通的输入框,直接在输入框元素上使用 v-text="currentText" 然后在 watch 中监听 value 的变化,实时更新 currentText,就能实现双向绑定
但这个 textarea 返回的是 html,v-text 是不能用了 如果用 v-html 的话,在输入的时候,光标会一直跳到最前方,最后我采用了以下方案: 在 data 添加一个 isLocked 用于记录锁定状态 在 mounted() 的时候,通过 dom 操作初始化数据 在聚焦和失焦的时候修改锁定状态 看,很简单吧,没有人会受伤的世界 一个基本的 textarea,完成了
五、插入标签 创建标签并不难,可如何让这个标签插入到光标所在的位置? 于是 Selection 对象闪亮登场,它记录了拖蓝的文本范围,或插入符号的当前位置 通过 Selection 对象可以获取到 Range 对象,然后使用 Range.insertNode() 方法,在目标位置插入标签 在 mounted() 中监听 selectionchange 事件,添加对应的处理函数,并在 beforeDestroy() 的时候卸载 在处理函数中,记录当前的 range
添加标签的时候,首先通过 document.createElement() 创建标签,然后插入节点
六、删除标签 删除分为光标位于标签外和标签内两种情况 首先是当光标在标签外的时候,有一个取巧的办法 给模版标签添加样式,将 -webkit-user-modify 设置为 read-only 这样在删除的时候,因为无法编辑,就会直接删除整个 dom 节点
当光标位于标签内的时候,会稍微复杂一点 首先需要监听 click 事件,当点击模版标签的时候,记录其 id 然后监听 keydown.delete 事件,如果选中了标签,就使用 removeChild() 删除标签
以上,就已经满足了产品的基本需求 不过既然是开发组件,就需要做一些适合组件开发的优化 比如 props 、slot 、 css样式等,这里就不多赘述了
最后,元旦快乐~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |